<style>

  .${table.object_name} .card-body{
    padding-top: 0px;
    min-height: 400px;
    padding-bottom: 0px;
  }

  .${table.object_name} .tree{
    padding-top: 15px;
    min-height: 400px;
    max-width: 250px;
    min-width: 200px;
  }

  .${table.object_name} .card-body{
    padding-top: 0px;
    min-height: 400px;
    padding-bottom: 0px;
  }

  .${table.object_name} .tree{
    padding-top: 15px;
    min-height: 400px;
    max-width: 250px;
    min-width: 200px;
  }

  .${table.object_name} .el-tree-node__content {
    color: #151b1e;
    height: 35px;
    border-bottom: 1px solid #e1e6ef;
    width: 100%;
  }
  .${table.object_name} .el-tree-node__expand-icon {
    cursor: pointer;
    color: #05132d;
    font-size: 12px;
  }
  .${table.object_name} .el-tree {
    width: 100%;
  }

  .${table.object_name} .header {
    padding: 5px;
  }

  .${table.object_name} .header {
    display: flex;
    padding-bottom: 5px;
    border-bottom: 1px solid #e1e6ef;
  }

  .${table.object_name} .el-tree .is-current>.el-tree-node__content{
    background: #2ac2ff;
    color: #606266;
  }

  .${table.object_name} .el-tree .is-current .el-tree-node__children{
    background: #fff;
    color: #606266;
  }

  .${table.object_name} .el-tree-node__expand-icon.is-leaf {
    color: transparent;
    cursor: default;
  }

</style>
<template>
  <div class="animated fadeIn">

    <!--搜索框-->
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="search-bar row" v-show="searchType === 0">
            <div class="col-lg-4 col-md-6 col-xs-12" >
              <div class="input-group form-group">
                <input class="form-control form-control-sm" v-model="search.searchTxt" placeholder="请输入项目名称"></input>
                <div class="input-group-btn">
                  <button type="btn" class="btn btn-primary" @click="searchData">
                    <i class="fa fa-search"></i>
                    搜索
                  </button>
                </div>
              </div>
            </div>
            <div class="col-lg-8 col-md-6 col-xs-12 form-group ad-search">
              
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="card greeFaq">
          <div class="card-header  bg-white">
            <div class="row">
              <div class="col-sm-5">
                <h3 class="card-title clearfix mb-0">FAQ</h3>
              </div>
              <div class="col-sm-7">
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-2 b-r-1 tree">
                <ul class="nav">
                  <span class="lab-primary btn-block">类别</span>
                  <el-input
                    placeholder="输入名称进行过滤"
                    v-model="filterText">
                  </el-input>
                  <el-tree
                    class="filter-tree"
                    :data="typetree"
                    :props="props"
                    default-expand-all
                    :filter-node-method="filterNode"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"
                    ref="tree">
                  </el-tree>
                </ul>
              </div>
              <div class="col-10">
                <div class="row" style="padding-top: 10px;padding-bottom: 10px">
                  <button type="button" class="btn btn-outline-primary float-left ml-3" @click="addOpen"><i class="fa fa-plus"></i> &nbsp; 新增</button>
                </div>
              <!--列表-->
                <div class="row">
                  <div class="col-lg-12">
                    <table class="table table-striped table-bordered datatable table-second">
                      <thead class="thead-default">
                      <tr>
                        <th class="text-center" v-for="ols in columnsList">{{ols.name}}</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for="(item,index) in ${table.functionName}List">
                        <#if table.field_list??>
                            <#list table.field_list as field>
                                <#if !field.nolist>
                                  <#if field.map??>
                                  <td class="text-center">{{${field.field_name}Map[item.${field.field_name}]}}</td>
                                  <#else>
                                  <td class="text-center">{{item.${field.field_name}}}</td>
                                  </#if>
                                </#if>
                              </#list>
                        </#if>
                        <td class="text-center">
                          <b-button class="btn-sm btn-info "
                                    @click="modify(item.${table.key_java_name})">
                            <i class="fa fa-edit"></i>修改
                          </b-button>
                          <b-button class="btn-sm btn-danger" @click="delData(item.${table.key_java_name})">
                            <i class="fa fa-trash-o"></i>删除
                          </b-button>
                        </td>
                      </tr>
                      <tr>
                        <td colspan="10" class="text-center" v-show="${table.functionName}List.length == 0">没找到你想要的数据</td>
                      </tr>
                      </tbody>
                    </table>

                    <!--分页-->
                    <div class="text-right">
                      <el-pagination
                        @size-change="changeSize"
                        @current-change="changepage"
                        background
                        layout="total,sizes,prev, pager, next"
                        :total="page.recordCount">
                      </el-pagination>
                    </div>
                  </div>
                </div>

                <!--添加-->
                <b-modal ref="addModalRef" v-model="modaAdd" title="添加"  width="400" class-name="vertical-center-modal">
                  <b-container fluid>
                    <el-form  :model="form${table._FunctionName}" ref="${table.functionName}AddForm" :rules="rules">
                <#if table.field_list??>
                    <#list table.field_list as field>
                        <#if !field.noinput>
                            <#if field.inputType=="select">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-select v-model="form${table._FunctionName}.${field.field_name}" placeholder="请选择">
                              <el-option
                                v-for="item in ${field.field_name}List"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#elseif field.inputType=="radio">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-radio-group v-model="form${table._FunctionName}.${field.field_name}">
                              <el-radio v-for="(item,index) in ${field.field_name}List" :label="item.value">{{item.text}}</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#elseif field.inputType=="checkbox">
              
                            <#elseif field.inputType=="textarea">
                                
                            <#elseif field.inputType=="datetime">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-date-picker
                              v-model="form${table._FunctionName}.${field.field_name}"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择${field.comment}">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#else>
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-input v-model="form${table._FunctionName}.${field.field_name}" auto-complete="off"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            </#if>

                        </#if>
                    </#list>
                </#if>
                    </el-form>
                  </b-container>
                  <div slot="modal-footer" class="text-right">
                    <b-button type="button" variant="secondary" @click="modaAdd = false">取消</b-button>
                    <b-button type="button" variant="primary" @click="addOk">确定</b-button>
                  </div>
                </b-modal>

                <!--修改-->
                <b-modal ref="modifyModalRef" v-model="modaEdit" title="编辑" width="400" class-name="vertical-center-modal"  ok-text="保存" @on-ok="$emit('update')">
                  <b-container fluid>
                    <el-form  :model="form${table._FunctionName}" ref="${table.functionName}ModifyForm" :rules="rules">
                <#if table.field_list??>
                    <#list table.field_list as field>
                        <#if !field.noinput>
                            <#if field.inputType=="select">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-select v-model="form${table._FunctionName}.${field.field_name}" placeholder="请选择">
                              <el-option
                                v-for="item in ${field.field_name}List"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#elseif field.inputType=="radio">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-radio-group v-model="form${table._FunctionName}.${field.field_name}">
                              <el-radio v-for="(item,index) in ${field.field_name}List" :label="item.value">{{item.text}}</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#elseif field.inputType=="checkbox">
              
                            <#elseif field.inputType=="textarea">
                                
                            <#elseif field.inputType=="datetime">
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-date-picker
                              v-model="form${table._FunctionName}.${field.field_name}"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择${field.comment}">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            <#else>
                      <el-row>
                        <el-col :xs="24" :span="6">
                          <span>${field.comment}:</span>
                        </el-col>
                        <el-col :xs="24" :span="18">
                          <el-form-item prop="${field.field_name}">
                            <el-input v-model="form${table._FunctionName}.${field.field_name}" auto-complete="off"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                            </#if>

                        </#if>
                    </#list>
                </#if>

                    </el-form>
                  </b-container>

                  <div slot="modal-footer" class="text-right">
                    <b-button type="button" variant="secondary" @click="modaEdit = false">取消</b-button>
                    <b-button type="button" variant="primary" @click="modifyOk">确定</b-button>
                  </div>

                </b-modal>

                <!--删除-->
                <b-modal ref="delModalRef" ok-title="确认" cancel-title="取消" v-model="delModel" size="sm" title="提示"  @ok="delOk">
                  确认删除吗？
                </b-modal>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ${table.functionName}Service from '@/views/${table.moduleName}/${table.functionName}/${table._FunctionName}Service'

  import {list2map, toSelectList} from '@/util/listMap'

  import $ from 'jquery'
  import ElCol from 'element-ui/packages/col/src/col'

  export default {
    components: {ElCol},
    name: '${table.functionName}',
    data () {
      return {
        ${table.functionName}List: [],
        filterText: '',
        props: {
          label: 'text',
          children: 'children'
        },
        typetree: [],
        form${table._FunctionName}: {
          <#if table.field_list??>
          <#list table.field_list as field>
          ${field.field_name}: null<#if field_has_next>,</#if>
          </#list>
          </#if>
        },
	<#if table.field_list??>
		<#list table.field_list as field>
		<#if field.map??>
        ${field.field_name}List: [
        <#list field.map?keys as key> 
          {'value': ${key}, 'text': '${field.map[key]}'}<#if key_has_next>,</#if>
        </#list>
        ],
        ${field.field_name}Map: {},
        ${field.field_name}SearchList: {},
		</#if>
		</#list>
	</#if>
        columnsList: [
          <#if table.field_list??>
              <#list table.field_list as field>
                <#if !field.nolist>
          {name: '${field.comment}', field: '${field.field_name}'},
                </#if>
              </#list>
          </#if>
          {name: '操作', field: 'oper'}
        ],
        delId: null,
        page: {currentPage: 1, pageSize: 10, pageCount: 0, recordCount: 0},
        search: {searchTxt: null},
        adSearch: {searchTxt: null, startDateFrom: null, startDateTo: null},
        searchType: 0,
        delModel: false,
        modaAdd: false,
        modaEdit: false,
        rules: {
            <#if table.field_list??>
                <#list table.field_list as field>
                    <#if !field.noinput>
                      <#if field.inputType=="select" || field.inputType=="radio" || field.inputType=="datetime">
          ${field.field_name}: [
            {required: true, message: '请选择${field.comment}', trigger: 'change'}
          ]<#if field_index!=table.field_list?size>,</#if>
                      <#else>
          ${field.field_name}: [
            {required: true, message: '请输入${field.comment}', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字', trigger: 'blur'}
          ],
                      </#if>
                    </#if>
                </#list>
            </#if>
          test: []
        }
      }
    },
    mounted () {
	<#if table.field_list??>
		<#list table.field_list as field>
		<#if field.map??>
      this.${field.field_name}Map = list2map(this.${field.field_name}List)
      this.${field.field_name}SearchList = toSelectList(this.${field.field_name}List)
		</#if>
		</#list>
	</#if>
      this.get${table._FunctionName}List()
      this.getTypeTree()
    },
    watch: {
      filterText (val) {
        this.$refs['tree'].filter(val)
      }
    },
    methods: {
      async get${table._FunctionName}List () {
        // 普通搜索
        this.search.currentPage = this.page.currentPage
        this.search.pageSize = this.page.pageSize
        this.search.searchTxt = $.trim(this.search.searchTxt)
        const res = await ${table.functionName}Service.get${table._FunctionName}List(this.search)
        if (res.header.code === 0) {
          this.${table.functionName}List = res.data.list
          this.page = res.data.page
        } else {
          this.$toastr('error', '', res.header.message)
        }
      },
      async getTypeTree () {
        const res = await ${table.functionName}Service.getTypeTree()
        if (res.header.code === 0) {
          // debugger
          this.typetree = res.data
        } else {
          this.$toastr('error', '', res.header.message)
        }
      },
      async ${table.functionName}Add () {
        // 添加 提交
        const res = await ${table.functionName}Service.${table.functionName}Add(this.form${table._FunctionName})
        if (res.header.code === 0) {
          this.form${table._FunctionName} = {${table.functionName}Name: '', ${table.functionName}Type: null, state: 1}
          this.get${table._FunctionName}List()
          this.$toastr('success', '', '添加成功')
          console.log(this.$refs['addModalRef'])
          this.$refs['addModalRef'].hide()
        } else {
          this.$toastr('error', '', res.header.message)
        }
      },
      async ${table.functionName}Edit () {
        // 修改 提交
        debugger
        const res = await ${table.functionName}Service.${table.functionName}Edit(this.form${table._FunctionName})
        console.log(res)
        if (res.header.code === 0) {
          this.form${table._FunctionName} = {}
          this.get${table._FunctionName}List()
          this.$toastr('success', '', '修改成功')
          this.$refs['modifyModalRef'].hide()
        } else {
          this.$toastr('error', '', res.header.message)
        }
      },
      async ${table.functionName}Delete (${table.key_java_name}) {
        // 删除 提交
        const res = await ${table.functionName}Service.${table.functionName}Delete({${table.key_java_name}: ${table.key_java_name}})
        // debugger
        if (res.header.code === 0) {
          this.$toastr('success', '通知', '删除成功')
          this.$refs['delModalRef'].hide()
          this.get${table._FunctionName}List()
        } else {
          this.$refs['delModalRef'].hide()
          this.$toastr('error', '', res.header.message)
        }
      },
      async addOpen () {
        this.$refs['addModalRef'].show()
      },
      addOk: function (evt) {
        this.$refs['${table.functionName}AddForm'].validate((valid) => {
          if (valid) {
            this.${table.functionName}Add()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async modify (${table.key_java_name}) {
        // 修改 获取 内容
        const res = await ${table.functionName}Service.get${table.functionName}Detail({${table.key_java_name}: ${table.key_java_name}})
        if (res.header.code === 0) {
          this.form${table._FunctionName} = res.data
          this.modaEdit = true
          // this.$refs['modifyModalRef'].show()
        } else {
          this.$toastr('error', '', res.header.message)
        }
      },
      modifyOk: function (evt) {
        this.$refs['${table.functionName}ModifyForm'].validate((valid) => {
          if (valid) {
            this.${table.functionName}Edit()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      delData: function (id) {
        // 删除 显示 确认框
        this.delId = id
        this.$refs['delModalRef'].show()
      },
      delOk: function (evt) {
        // 删除 确认 点击
        evt.preventDefault()
        this.${table.functionName}Delete(this.delId)
      },
      searchData: function () {
        // 搜索
        this.get${table._FunctionName}List()
      },
      changepage: function (index) {
        // 分页 切换
        this.page.currentPage = index
        this.get${table._FunctionName}List()
      },
      changeSize: function (size) {
        // 分页 每页数据 切换
        this.page.pageSize = size
        this.get${table._FunctionName}List()
      },
      filterNode (value, data) {
        if (!value) return true
        return data.text.indexOf(value) !== -1
      },
      handleNodeClick (data) {
        this.search.typeId = data.id
        this.get${table._FunctionName}List()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.adSearch = {searchTxt: null, startDateFrom: null, startDateTo: null}
      }
    }
  }
</script>
